<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #canvas{
            display: block;
            background:  #996633;
            /* display: none; */
            /* transform: scale(0.8); */
        }
        #judgePanel{
            position: absolute;
            /* display: none; */
            background: rgba(123, 240, 234, 0.3);
            box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
            backdrop-filter: blur( 4px );
            -webkit-backdrop-filter: blur( 4px );
            border-radius: 10px;
            border: 1px solid rgba( 255, 255, 255, 0.18 );
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="860" height="860px"></canvas>
    <canvas id="judgePanel" width="400" height="400px">
    </canvas>
    <script>
        let victoryName = ''
        let judgePanel = document.querySelector('#judgePanel')
        judgePanel.style.display= "none"
        let judgePanel_pen = judgePanel.getContext('2d') 
        let canvas = document.querySelector('#canvas')
        let ctx = canvas.getContext('2d')
        let raceColor = ['white','black']
        let step = 0
        let mapArr = []
        function init(){
            for(let i = 0;i<=16;i++){
                mapArr[i] = []
                for(let j =0; j<=16;j++){
                    mapArr[i][j] = 0
                }
            } 
            for(let i = 0;i<=16;i++){
                ctx.moveTo(30+i*50,30)
                ctx.lineTo(30+i*50,830)
                ctx.moveTo(30,30+i*50)
                ctx.lineTo(830,30+i*50)
            } 
            ctx.stroke() 
            step = 0      
            canvas.addEventListener('click',position)               
        }
        init()
        function drawChess(x,y){
            step++
            ctx.fillStyle = raceColor[step%2]           
            ctx.beginPath()
            ctx.arc(x,y,20,0,Math.PI*2,false) //x,y,r,起始角，结束角，false 是顺时针渲染，（12点钟方向是1.5PI）
            ctx.fill()
            ctx.stroke()            
        }
        let dx = 0,dy = 0, flag = 1,arrx=0,arry=0
        function position(e){
            if(e.offsetX>10&&e.offsetX<=30){
                arrx = 0
            }            
            else if( (e.offsetX-30)%50 <=20  ){
                arrx= Math.floor((e.offsetX-30)/50 )
            }
            else if( (e.offsetX-30)%50 >=30){
                arrx = Math.floor((e.offsetX-30)/50)+1
            }
            else{
                flag = 0
            }
            if(e.offsetY>10&&e.offsetY<=30){
                arry = 0
            }   
            else if( (e.offsetY-30)%50 <=20  ){
                arry =  Math.floor((e.offsetY-30)/50)         
            }
            else if( (e.offsetY-30)%50 >=30){
                arry =  Math.floor((e.offsetY-30)/50) +1

            }else{
                flag = 0
            }
            dx = arrx*50 + 30
            dy = arry*50 + 30       
            if(flag===1&&dx>=30&&dx<=850&&dy>=10&&dy<=850&&mapArr[arrx][arry]===0){
                mapArr[arrx][arry]=step%2  + 1
                judge(step%2+1,arrx,arry)                                 
                drawChess(dx,dy)
            }else{
                flag = 1
            }
        }

        let count_across = 0
        let count_vertical = 0
        let count_leftward = 0
        let count_rightward = 0
        function judge(num,x,y){
            count_across = 0
            count_vertical = 0
            count_leftward = 0
            count_rightward = 0
            for(let i =-4;i <= 4; i++){         //横向
                if(x+i<0||x+i>16){ continue  }
                if(mapArr[x+i][y]===num){
                    count_across++
                    if(count_across===5){
                        victory(num)
                    }
                }else count_across=0

            }
            for(let i =-4;i <= 4; i++){         //竖向
                if(y+i<0||y+i>16){ continue }
                if(mapArr[x][y+i]===num){
                    count_vertical++
                    if(count_vertical===5){
                        victory(num)
                    }
                }else count_vertical=0
            }
            for(let i =-4;i <= 4; i++){         //左斜
                if(y+i<0||y+i>16||x+i<0||x+i>16){ continue }
                if(mapArr[x+i][y+i]===num){
                    count_leftward++
                    if(count_leftward===5){
                        victory(num)
                    }
                }else count_leftward=0
            }
            for(let i =-4;i <= 4; i++){         //右斜
                if(y+i<0||y+i>16||x-i<0||x-i>16){ continue }
                if(mapArr[x-i][y+i]===num){
                    count_rightward++
                    if(count_rightward===5){
                        victory(num)
                    }
                }else count_rightward=0
            }
        }
        function victory(num){
 
            if(num===1){
                judgePanel_pen.fillStyle="black"
                victoryName="黑胜"

            } 
            else
            {
                judgePanel_pen.fillStyle="white"
                victoryName="白胜"
            }          

            canvas.removeEventListener('click',position)
            judgePanel_pen.font = "60px Arial"
            judgePanel_pen.fillText(victoryName,140,200)
            judgePanel_pen.font = "30px Arial"
            judgePanel_pen.fillText('点击此处面板继续',80,300)
            judgePanel.style.display = ''
            judgePanel.addEventListener('click',function(){
                let judgew = judgePanel.width
                let judgeh = judgePanel.height
                judgePanel.width = judgew
                judgePanel.height = judgeh
                judgePanel.style.display = 'none'
                let w = canvas.width;
                let h = canvas.height;
                canvas.width  = w
                canvas.height = h 
                init()
            })
        }
    </script>
</body>
</html>